<template>
  <div class="qc-query-form-wrapper">
    <a-form-model
      v-if="searchData.length>0"
      labelAlign="right"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      :model="queryParam"
      @submit.native.prevent
    >
      <a-row :gutter="48">
        <a-col
          :xs="24"
          :xl="colSpan"
          v-for="(item,index) in searchData"
          :key="index"
          v-show="index<(colNumber-1) || isOpen"
        >
          <!-- 实现让用户可以自定义搜索条件 -->
          <a-form-model-item :label="item.label">
            <template v-if="item.scopedSlots && item.scopedSlots.customRender">
              <slot :name="item.scopedSlots.customRender"></slot>
            </template>
            <template v-else>
              <a-input
                v-if="item.type==='input'"
                v-model="queryParam[item.name]"
                :placeholder="'请输入'+item.label"
                @keyup.enter.native="handleSearch"
              />
              <a-date-picker
                v-if="item.type==='date'"
                v-model="queryParam[item.name]"
                :valueFormat="item.valueFormat || 'YYYY-MM-DD'"
                @change="handleSearch"
                :placeholder="'请输入'+item.label"
                style="width:100%"
              />
              <dictionary-select
                v-if="item.type==='dictionarySelect'"
                :codeItemId="item.codeItemId"
                v-model="queryParam[item.name]"
                :placeholder="'请选择'+item.label"
                @change="handleSearch"
              ></dictionary-select>
            </template>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :xl="rowOnlyOperateBtn?24:colSpan">
          <div :style="rowOnlyOperateBtn ?'float:right' :''" class="query-form-operation-buttons">
            <a-button type="primary" icon="search" @click="handleSearch">搜索</a-button>
            <a-button class="margin-left8" @click="restForm">重置</a-button>
            <a
              class="margin-left8"
              v-if="searchData.length>(colNumber-1)"
              @click="()=>{isOpen=!isOpen}"
            >
              {{isOpen?'收起':'展开'}}
              <a-icon :type="isOpen?'up':'down'" />
            </a>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
export default {
  props: {
    colSpan: {
      //24/colSpan 得出一行有几列搜索条件
      type: Number,
      default: 6
    },
    //搜索的data 可支持 input select date //todo根据需要进行持续增加 [{name,type,label}]
    searchData: {
      type: Array,
      default: () => []
    },
    //需要放到后台中查询的值,需要searchData中的name相同
    queryParam: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      isOpen: false
    };
  },
  methods: {
    //搜索
    handleSearch() {
      this.$emit("search");
    },
    //重置表单
    restForm() {
      let arr = ["page", "limit", "join", "orders"];
      for (let i in this.queryParam) {
        if (arr.indexOf(this.queryParam[i] == -1)) this.queryParam[i] = null;
      }
      this.handleSearch();
    }
  },
  computed: {
    //计算每行几列
    colNumber() {
      return 24 / this.colSpan;
    },
    //计算行数
    rowsNumber() {
      return Math.ceil(this.searchData.length / this.colNumber);
    },
    //是否一行只显示操作按钮
    rowOnlyOperateBtn() {
      return this.searchData.length % this.colNumber == 0 && this.isOpen;
    }
  }
};
</script>

<style>
.margin-left8 {
  margin-left: 8px;
}
.query-form-operation-buttons {
  box-sizing: border-box;
  margin-top: 5px;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  margin-bottom: 24px;
  vertical-align: top;
}
</style>